<template>
    <u-popup :show="visible" @close="close" closeable mode="bottom">
        <view class="pd-v-24 pd-b-68">
            <view class="txt-center pd-t-40 font32 lh-44 bold">
                充值金额
            </view>
            
            <view class="flex flex-center mr-t-44"> 
                <view class="mr-r-14 charge-value-class" v-for="(item,index) in chargeList" :key="'chargeList'+index">
                    <u-button plain :text=" item == '其他金额' ? item : '￥' +item" :color="chargeValue == item ? '#35BE65' : '#A4A6A5'"  @click="chargeValue = item"></u-button>
                </view>
            </view>

            <view v-if="chargeValue == '其他金额'" class="mr-t-24">
                <u-input
                    placeholder="请输入充值金额"
                    border="surround"
                    v-model="value"
                    prefixIcon="rmb"
                    prefixIconStyle="font-size: 20px;color: #333333;font-weight:bold"
                    type="number"
                    :customStyle="{backgroundColor:'#F5F5F5'}"
                >
                
                </u-input>
            </view>
                


            <view class="pd-v-52 mr-t-20">
                <u-button type="primary" shape="circle"  text="确定" color="#35BE65" @click="chargeConfirm"></u-button>
            </view>
              

              
        </view>
    </u-popup>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted, computed,defineExpose } from "vue";
import { useStore } from '@/store/index.js';

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
});
const store = useStore();
const visible = ref(false)
const chargeValue = ref(20)
const chargeList = ref([
    20,30,50,100,'其他金额'
])
const value = ref(0)

const emit = defineEmits(['update:close', 'confirm']);

const close = () => {
    visible.value = false
    chargeValue.value = 20
    value.value = 0
}

const show = () => {
    visible.value = true
}

const chargeConfirm = () => {
    if(chargeValue.value == '其他金额'){
        emit('confirm',value.value)
    } else {
        emit('confirm',chargeValue.value)
    }

    close()
}

defineExpose({
    close,
    show
})


</script>

<style scoped lang="scss">

    .charge-value-class {
        width: 130rpx;
    }

</style>